<div class="px-4 pb-2">
  <div class="flex items-center gap-2 pb-6 pt-4">
    <p class="text-lg">Sidebar Library and Shelf Sorting Preference</p>
    <i class="pi pi-info-circle text-sky-600"
       pTooltip="Configure sorting options for your library and shelves shown in the sidebar."
       tooltipPosition="right"
       style="cursor: pointer;">
    </i>
  </div>

  <div class="grid grid-cols-[auto,1fr] pl-6 gap-y-4 gap-x-4 items-center">
    <p class="py-1">Library:
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Choose how books are sorted and displayed in the library sidebar."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-4 justify-start">
      <p-select
        size="small"
        [options]="sortingOptions"
        [(ngModel)]="selectedLibrarySorting"
        (ngModelChange)="onLibrarySortingChange()"
        placeholder="Select Sorting">
      </p-select>
    </div>

    <p class="py-4">Shelf:
      <i class="pi pi-info-circle text-sky-600"
         pTooltip="Choose how books are sorted and displayed in the shelf sidebar."
         tooltipPosition="right"
         style="cursor: pointer;">
      </i>
    </p>
    <div class="flex gap-4 justify-start">
      <p-select
        size="small"
        [options]="sortingOptions"
        [(ngModel)]="selectedShelfSorting"
        (ngModelChange)="onShelfSortingChange()"
        placeholder="Select Sorting">
      </p-select>
    </div>
  </div>
</div>
